﻿<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ui_tab demo</title>
<script type="text/javascript" src="../../core/jquery-last.js"></script>
<script type="text/javascript" src="ui_tab.js"></script>
<link rel="stylesheet" href="ui_tab.css" type="text/css"></link>
</head>
<body>
	<div id="div1">
		<div id="ui-tabdemo" class="ui_tab">
			<span class="sprite tab_left"></span>
			<span class="sprite tab_right"></span>
			<ul class="sprite tab_content">
				<li><a href="#">第1菜单</a></li>
				<li><a href="#">第2菜单</a></li>
				<li class="selected">
                    <a href="#">第3菜单</a>
                    <div class="subtab">
				        <span class="sprite subtab_arrow"></span>
				        <span class="sprite subtab_left"></span>
				        <ul class="sprite subtab_content">
					        <li><a href="#">第1.1菜单</a></li>
					        <li class="subtab_extend">
					        <a href="#">第1.2菜单</a>
					        <div class="trdtab">
						        <div class="sprite trdtab_header"></div>
						        <ul class="trdtab_content">
							        <li class="selected"><a href="#">第1.1.1菜单</a></li>
							        <li><a href="#">第1.1.2菜单</a></li>
							        <li><a href="#">第1.1.3菜单</a></li>
						        </ul>
						        <div class="sprite trdtab_footer"></div>
					        </div>
					        </li>
					        <li class="selected"><a href="#">第1.3菜单</a></li>
					        <li><a href="#">第1.4菜单</a></li>
				        </ul>
				        <span class="sprite subtab_right"></span>
			        </div>
                </li>
				<li><a href="#">第4菜单</a></li>
			</ul>
			<div class="clear"></div>
		</div>
	</div>
    <div id="div2"></div>
    <div id="div3"></div>
<script type="text/javascript">
    var obj = {parent:"#div1",items:
		[
            {name:"菜单一",tip:"菜单第一条",link:"#item"},
            {name:"菜单二",tip:"菜单第二条",children:[
                {name:"菜单二零",tip:"菜单20",link:"#item20"},
                {name:"菜单二一",tip:"菜单21",link:"#item21"},
                {name:"菜单二二",tip:"菜单22",children:[
                    {name:"菜单二二一",tip:"菜单221",link:"#item221"},
                    {name:"菜单二二二",tip:"菜单222",link:"#item222"},
                    {name:"菜单二二三",tip:"菜单223",link:"#item223"}
                ]}
            ]},
            {name:"菜单三",tip:"菜单第三条",children:[
                {name:"菜单三零",tip:"菜单30",link:"#item30"},
                {name:"菜单三一",tip:"菜单31",link:"#item31"},
                {name:"菜单三二",tip:"菜单32",children:[
                    {name:"菜单三二一",tip:"菜单321",link:"#item321"},
                    {name:"菜单三二二",tip:"菜单322",link:"#item322"},
                    {name:"菜单三二三",tip:"菜单323",link:"#item323"}
                ]}
            ]}
        ]
    };
	var objTab = new ui_tab(obj);
	obj.parent = "#div2";
	var objTab2 = new ui_tab(obj);
	obj.parent = "#div3";
	var objTab3 = new ui_tab(obj);
</script>
</body>
</html>